<!--
 @description
 @fileName index.vue
 @author zengqiongying
 @created 2022/07/27 10:13:32
-->
<template>
  <div class="bottom-tabbar">
    <van-tabbar v-model="activeNav" active-color="#00C8B4" inactive-color="#B5B7C4" fixed :safe-area-inset-bottom="true">
      <van-tabbar-item @click.native="handleRefresh('HomeIndex')">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? iconHome.active : iconHome.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click.native="handleRefresh('GoodsIndex')">
        <span>整家产品</span>
        <template #icon="props">
          <img :src="props.active ? iconPro.active : iconPro.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click.native="handleRefresh('Cart')">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? iconCart.active : iconCart.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click.native="handleRefresh('My')">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? iconMine.active : iconMine.inactive">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      iconHome: {
        active: require('@/assets/my/icon-nav-home-active.png'),
        inactive: require('@/assets/my/icon-nav-home.png')
      },
      iconPro: {
        active: require('@/assets/my/icon-nav-pro-active.png'),
        inactive: require('@/assets/my/icon-nav-pro.png')
      },
      iconCart: {
        active: require('@/assets/my/icon-nav-cart-active.png'),
        inactive: require('@/assets/my/icon-nav-cart.png')
      },
      iconMine: {
        active: require('@/assets/my/icon-nav-my-active.png'),
        inactive: require('@/assets/my/icon-nav-my.png')
      },
      activeNav: 0
    }
  },
  watch: {
    value: {
      handler(v) {
        this.activeNav = v
      },
      immediate: true
    },
    activeNav(v) {
      this.$emit('input', v)
    },
    $route: {
      handler(val, oldval) {
        const tabs = ['HomeIndex', 'GoodsIndex', 'Cart', 'My']
        const index = tabs.indexOf(val.name)
        this.activeNav = index !== -1 ? index : 0
      },
      immediate: true,
      // 深度观察监听
      deep: true
    }
  },
  created() {

  },
  methods: {
    handleRefresh(name) {
      if (this.$route.name === name) {
        this.$emit('refresh', name)
      } else {
        this.$router.replace({ name })
      }
    }
  }
}

</script>
<style lang='less' scoped>
.bottom-tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  z-index: 99;
  /deep/ .van-tabbar-item{
    font-size: 10px;
  }
  /deep/ .van-tabbar-item__icon img{
      height: 26px;
    }
  /deep/ .van-hairline--top-bottom::after,
  /deep/ .van-hairline-unset--top-bottom::after{
    border-width:1px 0 0
  }
}
</style>
